<template>
	<view class="container">
		<view class="header">
			<text class="title">朋友圈</text>
			<view class="camera-icon" @tap="openCamera">
				<uni-icons type="camera-filled" size="24" color="#ffffff"></uni-icons>
			</view>
		</view>

		<view class="user-info">
			<image :src="userInfo.background" mode="aspectFill" class="background-image"></image>
			<view class="user-avatar">
				<image :src="userInfo.avatar" mode="aspectFill"></image>
				<text style="margin-left: 10rpx;font-size: 30rpx;">{{ userInfo.nickname }}</text>
			</view>
		</view>
		<view v-for="(post, index) in posts" :key="index" class="post-item">
			<view class="post-header">
				<image :src="post.avatar" class="avatar" mode="aspectFill"></image>
				<view class="post-info">
					<text class="nickname">{{ post.nickname }}</text>
					<text class="time">{{ post.time }}</text>
				</view>
			</view>
			<text class="content">{{ post.content }}</text>
			<view class="image-list"
				:class="{'single-image': post.images.length === 1, 'multi-image': post.images.length > 1}">
				<image v-for="(img, imgIndex) in post.images" :key="imgIndex" :src="img" mode="aspectFill"
					@tap="previewImage(post.images, imgIndex)"></image>
			</view>
			<view class="actions">
				<view class="like-comment">
					<view class="action-btn" @tap="likePost(index)">
						<uni-icons :type="post.isLiked ? 'heart-filled' : 'heart'"
							:color="post.isLiked ? '#ff6b6b' : '#576b95'" size="18"></uni-icons>
					</view>
					<view class="action-btn" @tap="showCommentInput(index)">
						<uni-icons type="chat" color="#576b95" size="18"></uni-icons>
					</view>
				</view>
			</view>
			<view class="action-list" v-if="post.likes.length || post.comments.length">
				<view class="likes" v-if="post.likes.length">
					<uni-icons type="heart-filled" size="14" color="#576b95"></uni-icons>
					<text>{{ post.likes.join(', ') }}</text>
				</view>
				<view class="comments" v-if="post.comments.length">
					<view v-for="(comment, commentIndex) in post.comments" :key="commentIndex" class="comment-item">
						<text class="comment-user">{{ comment.user }}</text>
						<text class="comment-content">{{ comment.content }}</text>
					</view>
				</view>
			</view>
		</view>

		<view class="comment-input" v-if="showCommentBox">
			<input v-model="commentText" placeholder="评论" :focus="showCommentBox" @blur="onInputBlur" />
			<button @tap.stop="addComment">发送</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {
					nickname: '我的昵称',
					avatar: '/static/goods/2.webp',
					background: '/static/goods/bb.png'
				},
				posts: [{
						id: 2,
						nickname: '李四',
						avatar: '/static/goods/4.webp',
						time: '2小时前',
						content: '分享多张美图，测试多图布局。',
						images: ['/static/goods/2.webp', '/static/goods/3.webp', '/static/goods/4.webp',
							'/static/goods/2.webp'
						],
						likes: ['张三'],
						isLiked: true,
						comments: []
					},
					{
						id: 1,
						nickname: '张三',
						avatar: '/static/goods/2.webp',
						time: '1小时前',
						content: '这是一条朋友圈内容示例，展示了单张图片的布局。',
						images: ['/static/goods/3.webp'],
						likes: ['李四', '王五'],
						isLiked: false,
						comments: [{
								user: '李四',
								content: '真不错！'
							},
							{
								user: '王五',
								content: '羡慕啊'
							}
						]
					},
					{
						id: 3,
						nickname: '王五',
						avatar: '/static/goods/3.webp',
						time: '昨天',
						content: '这是一条没有图片的纯文字朋友圈，用于测试不同类型的布局。',
						images: [],
						likes: ['张三', '李四'],
						isLiked: false,
						comments: [{
							user: '张三',
							content: '支持纯文字朋友圈！'
						}]
					}
				],
				showCommentBox: false,
				commentText: '',
				currentPostIndex: -1,
				isAddingComment: false
			}
		},
		methods: {
			openCamera() {
				uni.showToast({
					title: '打开相机',
					icon: 'none'
				})
			},
			previewImage(images, current) {
				uni.previewImage({
					urls: images,
					current: images[current]
				})
			},
			likePost(index) {
				const post = this.posts[index];
				const currentUser = this.userInfo.nickname;

				if (post.isLiked) {
					post.likes = post.likes.filter(user => user !== currentUser);
				} else {
					post.likes.push(currentUser);
				}
				post.isLiked = !post.isLiked;
			},
			showCommentInput(index) {
				this.currentPostIndex = index;
				this.showCommentBox = true;
				this.$nextTick(() => {
					
				});
			},
			onInputBlur() {
				setTimeout(() => {
					if (!this.isAddingComment) {
						this.hideCommentInput();
					}
				}, 100);
			},
			hideCommentInput() {
				this.showCommentBox = false;
				this.commentText = '';
				this.currentPostIndex = -1;
			},
			addComment() {
				this.isAddingComment = true;
				if (this.commentText.trim() && this.currentPostIndex !== -1) {
					const newComment = {
						user: this.userInfo.nickname,
						content: this.commentText.trim()
					};
					if (!this.posts[this.currentPostIndex].comments) {
						this.posts[this.currentPostIndex].comments = [];
					}
					this.posts[this.currentPostIndex].comments.push(newComment);

					uni.showToast({
						title: '评论成功',
						icon: 'success'
					});

					this.hideCommentInput();
				}
				this.$nextTick(() => {
					this.isAddingComment = false;
				});
			}
		}
	}
</script>

<style lang="scss">
	.container {
		background-color: #f7f7f7;
		min-height: 100vh;
	}

	.header {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		height: 88rpx;
		background-color: #373737;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 100;
		padding-top: var(--status-bar-height);
	}

	.title {
		color: #ffffff;
		font-size: 34rpx;
		font-weight: 500;
	}

	.camera-icon {
		position: absolute;
		right: 30rpx;
	}

	.post-list {
		padding-top: calc(88rpx + var(--status-bar-height));
	}

	.user-info {
		height: 400rpx;
		position: relative;
		overflow: hidden;
	}

	.background-image {
		width: 100%;
		height: 100%;
	}

	.user-avatar {
		position: absolute;
		right: 30rpx;
		bottom: 30rpx;
		display: flex;
		align-items: flex-end;

		image {
			width: 140rpx;
			height: 140rpx;
			border: 4rpx solid #ffffff;
			margin-left: 20rpx;
			border-radius: 10rpx;
		}

		text {
			color: #ffffff;
			font-size: 34rpx;
			font-weight: 500;
			text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
		}
	}

	.post-item {
		background-color: #ffffff;
		padding: 30rpx;
		border-bottom: 1rpx solid #e6e6e6;
	}

	.post-header {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 20rpx;
		margin-right: 20rpx;
	}

	.post-info {
		flex: 1;
	}

	.nickname {
		font-size: 32rpx;
		font-weight: 500;
		color: #576b95;
	}

	.time {
		font-size: 24rpx;
		color: #b2b2b2;
		margin-top: 6rpx;
	}

	.content {
		font-size: 30rpx;
		color: #333333;
		line-height: 1.5;
		margin-bottom: 20rpx;
	}

	.image-list {
		display: flex;
		flex-wrap: wrap;

		&.single-image {
			image {
				max-width: 80%;
				max-height: 400rpx;
			}
		}

		&.multi-image {
			image {
				width: calc(33.33% - 6rpx);
				height: 220rpx;
				margin-right: 9rpx;
				margin-bottom: 9rpx;

				&:nth-child(3n) {
					margin-right: 0;
				}
			}
		}
	}

	.actions {
		margin-top: 20rpx;
	}

	.like-comment {
		text-align: right;
	}

	.action-list {
		background-color: #f7f7f7;
		padding: 16rpx;
		margin-top: 16rpx;
		font-size: 28rpx;
		border-radius: 6rpx;
	}

	.likes {
		color: #576b95;
		margin-bottom: 10rpx;
		display: flex;
		align-items: center;

		uni-icons {
			margin-right: 8rpx;
		}
	}

	.comments {
		.comment-item {
			margin-bottom: 8rpx;
		}

		.comment-user {
			color: #576b95;
			margin-right: 8rpx;
		}

		.comment-content {
			color: #333333;
		}
	}

	.action-btn {
		display: inline-block;
		padding: 10rpx;
	}

	.comment-input {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #f5f5f5;
		padding: 20rpx;
		display: flex;
		align-items: center;
		z-index: 999;

		input {
			flex: 1;
			background-color: #ffffff;
			border-radius: 30rpx;
			padding: 10rpx 20rpx;
			margin-right: 20rpx;
			font-size: 28rpx;
		}

		button {
			background-color: #007aff;
			color: #ffffff;
			font-size: 28rpx;
			padding: 0rpx 20rpx;
			border-radius: 30rpx;
		}
	}
</style>